<template>
	<view class="yz-active-container">
		<!-- 分享导航条 -->
		<view class="invite invite-top">
			<image
				src="https://thirdwx.qlogo.cn/mmopen/vi_32/kHoDdV15McWrySeeaQt9UVzic6DJ2mrlic2WkqbaHVWrUVghF4CcY5iatKrQwqGbymY0KvqDRS0sKbmQ9HvLMyYNg/132?x-oss-process=image/resize,m_fixed,h_76,w_76"
				mode="aspectFill"></image>
			<view class="headTxt">
				<view>您的好友<text>A00网络营销顾问-大建</text>
				</view>
				<view>邀请您一起来提升学历</view>
			</view>
			<view class="card_btn">老师微信</view>
		</view>
		<!-- 菜单切换 -->
		<uv-sticky>
			<view class="tabs-bar head">
				<view class="item" v-for="item in topNavLit" :class="active==item.id?'active':''" :key="item.id"
					@click="setAct(item)">{{item.name}}</view>
				<!-- <view class="item" :class="active==0?'active':''" @click="setAct(0)">成人高考</view>
				<view class="item" :class="active==1?'active':''" @click="setAct(1)">开放教育</view>
				<view class="item" :class="active==2?'active':''" @click="setAct(2)">自学考试</view> -->
			</view>
		</uv-sticky>

		<view v-for="item in topNavLit" :class="item.style_name" :key="item.id" v-if="active==item.id">
			<!-- 轮播图 -->
			<swiper class="swiper" autoplay :style="[{height:`${H1}rpx`}]" circular>
				<swiper-item v-for="spic in item.swiperPics" :key="spic">
					<view class="swiper-item">
						<image :src='getImgSrc(spic)' mode="widthFix" @load="setH('H1',$event)"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 报读成功轮播 -->
			<view class="pos gundong">
				<swiper :autoplay="true" vertical circular>
					<swiper-item>
						<view class="gdBox_wrap" style="background: rgba(0, 0, 0, 0.1); opacity: 1;">
							<view class="img">
								<image
									src="https://static.yzou.cn/invite/ico/0D0E5921BDA34D29B55B814B9273692E.jpg?x-oss-process=image/resize,m_fixed,h_38,w_38"
									mode="aspectFill"></image>
							</view>
							<view class="txt_fr" style="color: rgb(54, 54, 54);">
								<text>李**</text><text>报读成功</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="gdBox_wrap" style="background: rgba(0, 0, 0, 0.1); opacity: 1;">
							<view class="img">
								<image
									src="https://static.yzou.cn/invite/ico/0D0E5921BDA34D29B55B814B9273692E.jpg?x-oss-process=image/resize,m_fixed,h_38,w_38"
									mode="aspectFill"></image>
							</view>
							<view class="txt_fr" style="color: rgb(54, 54, 54);">
								<text>张**</text><text>报读成功</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 样式1专属 -->
			<view class="gift-box" v-if="item.style_name == 'item1'">
				<image class="gift"
					src=""
					mode="widthFix"></image>
				<text class="grey">考前辅导课</text> <text class="grey">三本辅导教材</text>
				<view class="giftBtn">
					<text>￥599.00</text>
					<button class="gift-btn">抢购领取</button>
				</view>
			</view>
			<!-- 成人高考下的导航切换 -->
			<uv-sticky>
				<view class="white-tabs" v-if="item.style_name == 'item1'">
					<view class="item" :class="item1?'active':''" @click="setItem1('item1',true)">报读方法</view>
					<view class="item" :class="item1?'':'active'" @click="setItem1('item1',false)">成考简介</view>
				</view>
				<view class="white-tabs" v-else-if="item.style_name == 'item2'">
					<view v-for="col in topColleges" class="item" :key="col.id" :class="curColId == col.id?'active':''"
						@click="setItem1('item2',true, col.id)">{{col.co_name}}</view>
				</view>
				<view class="white-tabs" v-else>
					<view class="item" :class="item3?'active':''" @click="setItem1('item3',true)">招生主页</view>
					<view class="item" :class="item3?'':'active'" @click="setItem1('item3',false)">自考简介</view>
				</view>
			</uv-sticky>
			<!-- 根据上面的样式进行切换 -->
			<view v-if="item.style_name == 'item1'">
				<view class="yz-adult-education" v-if="item1">
					<view class="enroll-methods">
						<view class="red-title nomt">方法1：选择心仪院校</view>
						<view class="white-item-ul school">
							<view class="li" v-for="(col, index) in getItem1RecInfo(item.id, 'colleges')" :key="index">
								<view class="school-logo">
									<image :src='getImgSrc(col.co_logo)' mode="widthFix"></image>
								</view>
								<text class="school-name">{{col.co_name}}</text>
							</view>
							<view class="red li"><text>更多</text>
								<image
									src=""
									mode="widthFix" class="arrow"></image>
							</view>
						</view>
						<view class="red-title">方法2：选择心仪专业</view>
						<view class="white-item-ul pfsn">
							<view class="li" v-for="(profesion,index) in getItem1RecInfo(item.id, 'profession')"
								:key="index">
								{{profesion}}
							</view>

							<view class="red li"><text>更多</text>
								<image
									src=""
									mode="widthFix" class="arrow"></image>
							</view>
						</view>
						<view class="red-title">方法3：选择报读城市</view>
						<view class="white-item-ul city">
							<view class="li" v-for="(city,index) in getItem1RecInfo(item.id, 'city')" :key="index">
								{{city}}
							</view>
							<view class="red li"><text>更多</text>
								<image
									src=""
									mode="widthFix" class="arrow"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="brief-introduction">
					<text class="t1">
						{{item.introduction}}
					</text>
					<image v-for="imgSrc in item.introductionPics" :src='getImgSrc(imgSrc)' :key="imgSrc"
						mode="widthFix"></image>
				</view>
			</view>
			<view v-if="item.style_name == 'item2'">
				<view class="box" v-for="(col, index) in topColleges" :key="col.id" v-if="col.id == curColId">
					<view class="schoolDetails">
						<!-- 介绍主图 -->
						<image :src='getImgSrc(col.introduce_pic)' mode="widthFix" @load="setH('H1',$event)"></image>
						<!-- 介绍概要 -->
						<text class="schoolDetailsText">{{col.introduce_desc}}</text>
					</view>
					<view class="more" @click="open(col)">
						查看更多 <uni-icons type="right" size="30"></uni-icons>
					</view>
					<!-- 介绍详情 -->
					<view class="op1-img" v-html="col.introduce_detail"></view>
				</view>
			</view>
			<view v-if="item.style_name == 'item3'">
				<block v-if="item3">
					<view class="box">
						<image src="https://zm.yzou.cn/new-h5/static/images/8f4b96aa723fbad66e7f..png" mode="widthFix">
						</image>
						<image class="logo"
							src=""
							mode="widthFix"></image>
						<view class="btns-box">
							<view v-for="item in 5" :key="index">行政管理</view>
						</view>
						<image
							src=""
							mode="widthFix" class="logo2">
						</image>
						<view class="zk-uv-c">
							<view v-for="item in 6" :key="index" class="item">
								<image src="https://static.yzou.cn/university/2CC95746A3DE4726B51E63592DD007EB.png"
									mode="widthFix"></image>
								<text>华南理工大学</text>
							</view>
						</view>
					</view>
					<image src="https://zm.yzou.cn/new-h5/static/images/3829e8df8eed16e69148..png" mode="widthFix"
						style="width: 100%;"></image>
				</block>
				<view class="box text" v-else v-html='text'></view>
			</view>
		</view>


		<!-- 常见问题 -->
		<view class="tabs-bar">
			<view class="item active">常见问题</view>
		</view>
		<view class="collapse">
			<uni-collapse accordion>
				<view v-for="item in askList">
					<uni-collapse-item :title="item.name" :name="item.id" :key="item.id">
						<text class="item">{{item.content}}</text>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
		<!-- 版权 -->
		<view class="copy-right">
			<view>承办单位: 广州远智教育科技有限公司</view>
			<view>邮编: 516600 粤ICP备12034252号-1</view>
		</view>
		<view style="height: 140rpx;"></view>
		<!-- 底部导航栏 -->
		<view class="yz-second-footer">
			<view class="item">
				<image
					src=""
					class="icon" mode="widthFix"></image>
				<image
					src=""
					mode="widthFix" class="no-login"></image>
				<text>点击有礼</text>
			</view>
			<view class="item triangle">
				<view class="consult red-point">
					<image
						src=""
						mode="widthFix" class="icon"></image>
				</view>
				<text>在线咨询</text>
			</view>

			<button class="enroll-btn" @click="gotoSignup">
				<!-- pages/information/information -->
				<text>马上报读</text>
				<image
					src=""
					mode="widthFix"></image>
			</button>
		</view>
		<!-- 弹出窗口 -->
		<uni-popup ref="popup" type="bottom" background-color='#fff'>
			<scroll-view class="introduceBox" v-html="detail" scroll-y></scroll-view>
			<view class="close">
				<uni-icons type="closeempty" size="40rpx" color="#ccc"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import util from '../../xiluedu/util';
	export default {
		data() {
			return {
				apiHost: '',
				topNavLit: [],
				topColleges: [],
				askList: [],
				colIntroducePic: '',
				colIntroduceDesc: '666',
				colIntroduceDetail: '',
				curColId: 0,
				item2Active: 'active',
				H1: '', //高度
				H2: '', //高度
				H3: '', //高度
				item1: true,
				item2: true,
				item3: true,
				active: 0,
				detail: `<h3>学校详情</h3><p>国家开放大学是中华人民共和国教育部直属的，以现代信息技术为支撑，学历教育与非学历教育并举，实施远程开放教育的新型高等学校。学校是在中央广播电视大学和地方广播电视大学的基础上组建，以现代信息技术为支撑，办学网络立体覆盖全国城乡，学历与非学历教育并重，面向全体社会成员，没有围墙的新型大学。国家开放大学有权授予学士学位，由学校向北京市学位委员会申请并获批后，报国务院学位委员会备案。目前，注册在学生359万人，其中本科学生105万人，专科学生254万人，包括近20万农民学生，10万士官学生，6000多残疾学生。国家开放大学的组建成立，标志着广播电视大学系统在新的历史起点上踏上了新的征途。</p> <br><h3>历史使命</h3><p>国家开放大学强调“开放、责任、质量、多样化、国际化”的办学理念，大力发展非学历继续教育，稳步发展学历继续教育，推进现代科技与教育的深度融合，搭建终身学习“立交桥”，适应国家经济社会发展和人的全面发展需要，促进终身教育体系建设，促进全民学习、终身学习的学习型社会形成。经过10年努力，把国家开放大学建设成为我国高等教育体系中一所新型大学；世界开放大学体系中富有中国特色的开放大学；我国学习型社会的重要支柱。</p><h3>学习模式</h3><p>国家开放大学致力于实现有支持的开放式学习，探索以学习者为中心，基于网络自主学习、远程学习支持服务与面授辅导相结合的新型学习模式。以需求为导向，以能力培养为核心，改革教学内容和课程体系，与行业企业合作，科学、灵活、有针对性地开设国家开放大学特色专业。改进教学方法，为学习者提供集多媒体资源、教学交互、学习评价和学习支持服务于一体的海量、优质网络课程。通过遍布全国的学习中心提供面授辅导，也可以通过高清、快速的双向视频系统促进师生实时交流，为学习者提供随时随地的远程学习支持服务。推进以终结性考试为主向形成性考核为主的多元评价模式转变。</p><h3>公共服务</h3><p>国家开放大学也是一所新型的公益性大学，扎根基层，服务社会。利用国家开放大学网络平台和数字化学习资源库，开设网上大讲堂，向全体社会成员提供形式多样、内容丰富的网络讲座、公开课，提升公民科学文化素质，满足社会成员多样化、个性化学习需求。为普通高校、中高职院校、社会培训机构、行业企业、城乡社区提供包括远程学习支持、相关教育培训、信息咨询等各类公共服务。与相关国际组织、大学和机构开展针对性、多层次、宽领域的教育交流与合作。加强基于网络的孔子学院建设，大力推进对外汉语教学，促进中华文化走向世界。</p>`,
				html: '<img data-v-111ec178="" src="https://static.yzou.cn/gk_config/4010f754-5898-4553-a76b-01c4853adc22.jpg" alt="" style="width: 100%;">',
				text: `<div class="self-text-img"><p>&nbsp;&nbsp;&nbsp;&nbsp; 高等教育自学考试，简称自学考试、自考，是个人自学和国家考试相结合的高等教育形式。其学习方式灵活，不受年龄、教育程度的限制，学员均可通过自考取得相应毕业证。<br >&nbsp;&nbsp;&nbsp;&nbsp;自考学习者通过专业计划规定的全部课程考试，成绩合格并取得相应学分，完成毕业论文或其他教学时间任务，即准予毕业，获得国家承认的相应毕业证书。符合学位条件的本科毕业生，由有学位授予权的主考学校依照有关规定，授予学士学位。</p><img src='https://zm.yzou.cn/new-h5/static/images/058a3c074e8e314c84c6..png' width='100%'/> <p  class="mt20">实践类考核科目：一年进行2次安排，分为上半年考核和下半年考核，具体考核的形式及时间以远智教育教学计划安排为准。</p></div>`
			};
		},
		onLoad() {
			this.topNavLit = this.getTopNavList();
			this.askList = this.getAskList();
			this.apiHost = getApp().globalData.apiHost
		},
		onShareAppMessage(e) {

		},
		onPageScroll(e) {

		},
		onPullDownRefresh() {

		},
		methods: {
			phoneNumber(that,data){
				let wxAccount = that.$core.getCache('wx_account');
				data['third_id'] = wxAccount.third_id;
				let puser_id = uni.getStorageSync('puser_id') || 0;
				data['puser_id'] = puser_id;
				console.log('phoneNumber -> et_mobile', data)
				that.$core.post({
					  url: 'xiluedu.user/get_mobile',
					  data: data,
					  success: (ret, response) => {
						wxAccount['bindind'] = 1;
						let userinfo = ret.data.userinfo;
						that.$core.setCache('wx_account', wxAccount);
						that.$user.setUserinfo(userinfo);
						uni.setStorageSync('puser_id','');
						uni.navigateBack({
							delta:1
						})
					  },fail: (ret, response) => {
						//失败，重试
						uni.showToast({'title':"获取失败",icon:"none"})
						return false;
					  }
					});
				
			},
			gotoSignup() {
				const that = this;
				const wxAccount = that.$core.getCache('wx_account', wxAccount)
				if (!wxAccount|| wxAccount.binding === 0) {
					this.navTo('/pages/login/login1')
				} else {
					this.navTo('/pages/invite/invite')
				}
			},
			getImgSrc(sPic) {
				return this.apiHost + sPic;
			},
			getItem1RecInfo(id, dataType) {
				let result = [];
				this.topNavLit.map(item => {
					if (item.id == id) {
						switch (dataType) {
							case 'colleges':
								result = item.rec_colleges;
								break;
							case 'profession':
								result = item.rec_profession;
								break;
							case 'city':
								result = item.rec_city;
								break;
						}
					}
				})
				return result;
			},
			// 顶部导航
			getTopNavList() {
				this.$core.get({
					url: 'god/enrollment/topnav',
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;
						this.topNavLit = data;
						this.setAct(data[0])
					},
					fail: (ret, response) => {
						console.error('常见问题列表获取失败', ret);
						return false;
					}
				})
			},
			// 常见问题列表
			getAskList() {
				this.$core.post({
					url: 'xiluedu.article/lists',
					data: {
						category_id: 1,
					},
					success: (ret, response) => {
						const {
							code,
							data,
							msg: resMsg
						} = ret;
						this.askList = data.data;
					},
					fail: (ret, response) => {
						console.error('常见问题列表获取失败', ret);
						return false;
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			setH(name, e) {
				this[name] = 750 * e.detail.height / e.detail.width
			},
			setItem1(name, ac, colId) {
				this[name] = ac
				if (name === 'item2') {
					this.curColId = colId
				}
			},
			setAct(item) {
				this.active = item.id
				if (item.style_name == 'item2') {
					this.topNavLit.map(row => {
						if (row.id === item.id) {
							this.topColleges = row.topColleges
							this.setItem1('item2', true, this.topColleges[0].id)
							return;
						}
					})
				}
			},

			open(col) {
				this.detail = col.introduce_detail;
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	};
</script>
<style scoped lang="scss">
	.copy-right {
		margin: 40rpx auto;
		display: block;
		text-align: center;
		font-size: 28rpx;
		line-height: 1.5;
	}

	.yz-second-footer {
		background: #fff;
		bottom: 0;
		display: flex;
		left: 0;
		position: fixed;
		right: 0;
		z-index: 7;

		.item {
			border-top: 1px solid rgba(23, 6, 6, .08);
			color: #a70a0d;
			flex: 1;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 1;
			padding: 10rpx 0;
			position: relative;
			text-align: center;

			.icon {
				vertical-align: middle;
				width: 60rpx;
				display: block;
				margin: 0 auto 10rpx;
			}

			.no-login {
				left: 50%;
				position: absolute;
				top: -40rpx;
				transform: translateX(-50%);
				width: 90rpx;
			}

		}

		.enroll-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #da3338, #a70a0d);
			border: 0;
			color: #ffd33e;
			font-size: 36rpx;
			font-weight: 600;
			position: relative;
			text-align: center;
			width: 50%;

			image {
				width: 30rpx;
			}
		}
	}

	.collapse .item {
		display: block;
		padding: 20rpx 40rpx;
	}

	.yz-active-container {
		padding-bottom: 0.6rem;
	}

	.invite-top {
		position: relative;
		z-index: 10;
	}

	.invite {
		background-color: #fff;
		background-size: 100%;
		padding: 20rpx 0;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			border-radius: 50%;
			height: 90rpx;
			margin-left: 20rpx;
			width: 90rpx;
		}

		.headTxt {
			margin-left: 20rpx;
			overflow: hidden;
			width: 40%;

			view {
				font-size: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;

				text {
					color: red;
				}

				&:first-child {
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

			}
		}

		.card_btn {
			background-color: #19d100;
			background-image: url();
			background-position: left center;
			background-repeat: no-repeat;
			background-size: 80rpx;
			border-radius: 20rpx;
			color: #fff;
			margin-right: 20rpx;
			padding-left: 80rpx;
			padding-right: 20rpx;
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			height: 80rpx;
		}
	}


	.tabs-bar.head {
		background: #bc0001;
		z-index: 4;
		display: flex;

		.item {
			color: #fff;
			font-weight: 500;
			color: #fff;
			flex: 1;
			font-size: 32rpx;
			font-weight: 600;
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			text-align: center;
			transition: background .2s, color .2s;
		}

		.active {
			background: linear-gradient(180deg, #ffbf3c, #f88215)
		}
	}

	.item1 {
		position: relative;





		.gift-box {
			background: #fff;
			border-bottom: 20rpx solid #f2f2f2;
			border-radius: 20rpx 20rpx 0 0;
			color: rgba(0, 0, 0, .6);
			font-size: 28rpx;
			margin-top: -20rpx;
			padding: 40rpx 40rpx;
			position: relative;
			z-index: 1;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: center;

			.gift {
				width: 40%;
			}

			.grey {
				background: rgba(0, 0, 0, .05);
				border-radius: 100rpx;
				display: inline-block;
				margin-left: 10rpx;
				width: 25%;
				padding: 8rpx 0rpx;
				text-align: center;
			}

			.giftBtn {
				margin-top: 40rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 50rpx;
					font-weight: bold;
					color: #a70a0d;
				}

				image {
					width: 35%;
				}

				button {
					background: linear-gradient(180deg, #ffbf3c, #f88215);
					border-radius: 10rpx;
					color: #fff;
					font-size: 28rpx;
					font-weight: 500;
					height: 80rpx;
					text-align: center;
					width: 200rpx;
					margin: 0;
				}
			}

		}


		.yz-adult-education {
			padding: 40rpx;

			.red-title {
				background: linear-gradient(339deg, rgba(200, 0, 2, 0), #c80002);
				color: #fff;
				font-weight: 500;
				height: 60rpx;
				line-height: 60rpx;
				padding-left: 20rpx;
				position: relative;
				width: 70%;

				&:after {
					background: #f2f2f2;
					content: "";
					height: 60rpx;
					position: absolute;
					right: -30rpx;
					transform: skewX(-45deg);
					width: 60rpx;
				}
			}

			.white-item-ul {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 40rpx;



				.li {
					border-radius: 5rpx;
					display: inline-block;
					font-size: 18rpx;
					padding: 10rpx;
					width: calc(20% - 20rpx);
					background: #fff;
					box-shadow: 0 2rpx 6rpx 0 rgba(0, 0, 0, .3);
					color: #414141;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
					text-align: center;
					margin: 10rpx;
					align-items: center;

					.school-logo {
						width: 100%;

						image {
							display: block;
							margin: 0 auto;
							width: 80%;
						}
					}

				}

				.red {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					align-items: center;
					background: rgba(217, 50, 55, .1);
					border: 1px solid rgba(217, 50, 55, .2);
					box-shadow: none;
					color: #d93237;
					display: flex;
					font-size: 30rpx;
					justify-content: center;

					image {
						transform: rotate(180deg);
						width: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.pfsn .li {
				height: 80rpx;
				font-size: 30rpx;
				width: calc(33.33% - 20rpx) !important;
			}

			.city .li {
				font-size: 28rpx;
			}

			.school {
				padding-top: 20rpx;

			}
		}

		.brief-introduction {
			padding: 40rpx;

			.t1 {
				font-size: 28rpx;
				text-indent: 2em;
				display: block;
			}

			image {
				width: 100%;
			}
		}
	}

	.item2 {
		position: relative;



		.schoolDetails {
			background: #fff;
			width: 100%;

			image {
				border-radius: 10rpx;
				width: 100%
			}

			.schoolDetailsText {
				-webkit-box-orient: vertical;
				text-indent: 2em;
				-webkit-line-clamp: 5;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #555;
				line-height: 1.5;
				word-break: break-all
			}
		}

		.more {
			margin-top: 20rpx;
			color: #999;
			text-align: center;
		}

	}

	.item3 {
		position: relative;

		.logo {
			width: 40%;
			display: block;
			margin: 20rpx auto;
		}

		.logo2 {
			width: 30%;
			display: block;
			margin: 20rpx auto;
		}

		.btns-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			view {
				background: linear-gradient(180deg, #f9840a, #f73706);
				border-radius: 100rpx;
				box-shadow: 0 4rpx 6rpx 0 rgba(0, 0, 0, .2);
				color: #fff;
				font-size: 28rpx;
				height: 80rpx;
				margin: 10rpx;
				text-align: center;
				width: calc(50% - 20rpx);
				line-height: 80rpx;
			}
		}

		.zk-uv-c {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.item {
				text-align: center;
				width: calc(25% - 20rpx);
				margin: 10rpx;
				font-size: 20rpx;

				image {
					width: 60%;
					display: block;
					margin: 10rpx auto;
				}
			}
		}
	}

	.tabs-bar {
		.item {
			flex: 1;
			font-size: 28rpx;
			font-weight: bold;
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			text-align: center;
			transition: background .2s, color .2s;
		}

		.active {
			background: #d23c3d;
			color: #fff;
		}
	}

	.introduceBox {
		height: 70vh;
		background-color: #fff;
		padding: 40rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		position: relative;

	}

	.close {
		right: 20rpx;
		top: 20rpx;
		position: absolute;
	}

	.swiper {
		image {
			width: 100%;
		}
	}

	.gundong {
		position: absolute;
		right: 20rpx;
		top: 20rpx;

		swiper {
			height: 40rpx;
			width: 240rpx;
			border-radius: 40rpx;
			overflow: hidden;

			.gdBox_wrap {
				display: flex;
				font-size: 28rpx;
				justify-content: space-between;
				padding-right: 20rpx;
				box-sizing: border-box;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
			}

		}
	}

	.box {
		padding: 40rpx;

		image {
			width: 100%;
		}
	}

	.text {
		line-height: 1.5;
		text-indent: 2em;
	}

	.white-tabs {
		background: #fff;
		border-bottom: 1px solid rgba(23, 6, 6, .08);
		color: #000;
		display: flex;
		font-size: 28rpx;
		position: relative;
		z-index: 5;

		.item {
			flex: 1;
			height: 100rpx;
			position: relative;
			text-align: center;
			z-index: 3;
			line-height: 100rpx;
		}

		.active {
			color: #b6161b;

			&:after {
				background: #b6161b;
				border-radius: 10px;
				bottom: 0;
				content: "";
				height: 1px;
				left: 50%;
				position: absolute;
				transform: translateX(-50%);
				width: 4em;
			}
		}
	}
</style>